<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>

	<!-- <script type="text/javascript"
		src="http://code.jquery.com/jquery-1.4.3.min.js"></script> -->
	<!-- <h:outputScript library="primefaces" name="jquery/jquery.js" /> -->
	<script type="text/javascript">
$(document).ready(function(){
	alert("Hello---1");
    $("#txt_name").keyup(function(){
        alert($(this).val());
    });
    alert("hello---2");
    $("#myid li").click(function() {
        alert(this.id); // id of clicked li by directly accessing DOMElement property
        alert($(this).attr('id')); // jQuery's .attr() method, same but more verbose
        alert($(this).html()); // gets innerHTML of clicked li
        alert($(this).text()); // gets text contents of clicked li
    });
    alert("Hello---3");

})
</script>
</h:head>
<body>
<h:form>
	Hello

	<ul id='myid'>
		<li id='1'>First</li>
		<li id='2'>Second</li>
		<li id='3'>Third</li>
		<li id='4'>Fourth</li>
		<li id='5'>Fifth</li>
	</ul>


	<input type="text" id="txt_name" />
	
	<p:calendar></p:calendar>
</h:form>
</body>
</html>
